import { createVar, globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const tabPanelColorVar = createVar();

export const scrollLeftVar = createVar();
export const tabStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	position: 'relative',
	vars: {
		[tabPanelColorVar]: vars.color.windowBackground,
	},
});

// HEADER
globalStyle(`${tabStyle}>div.head`, {
	display: 'flex',
	overflow: 'scroll',
	scrollbarWidth: 'none',
	position: 'relative',
	height: '3em',
	vars: {
		[scrollLeftVar]: '0px',
	},
});

globalStyle(`${tabStyle}>div.head.hidden`, {
	display: 'none',
});

globalStyle(`${tabStyle}.outline>div.head`, {
	paddingLeft: '0.5em',
	position: 'relative',
	top: '1px',
	height: '2.4em',
});

globalStyle(`${tabStyle}>div.head>button`, {
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
	justifyContent: 'center',
	padding: '0em 1em',
	cursor: 'pointer',
	whiteSpace: 'nowrap',
	userSelect: 'none',
	border: 'none',
	borderBottom: `4px solid transparent`,
	backgroundColor: 'transparent',
	color: vars.color.secondaryText,
	fill: vars.color.secondaryText,
	borderTopLeftRadius: '0.5em',
	borderTopRightRadius: '0.5em',
	outline: 'none',
	fontSize: '1.2em',
	fontWeight: 'bold',
});
globalStyle(`${tabStyle}.outline>div.head>button`, {
	color: vars.color.text,
	fill: vars.color.text,
	fontWeight: 'normal',
	fontSize: '1em',
	border: '1px solid transparent',
	// top: '1px',
});
globalStyle(`${tabStyle}>div.head>button>svg`, {
	width: '1.8em',
	height: '1.5em',
});
globalStyle(`${tabStyle}>div.head>button>svg.close path`, {
	pointerEvents: 'none',
});
globalStyle(`${tabStyle}>div.head>button>svg.close`, {
	position: 'relative',
	width: '1.5em',
	height: '1.5em',
	padding: '0.2em',
	left: '0.5em',
	fill: vars.color.placeholderText,
});
globalStyle(`${tabStyle}>div.head>button>svg.close:hover`, {
	backgroundColor: vars.color.selectionBlur,
});
globalStyle(`${tabStyle}:not(.outline)>div.head>button`, {
	transition: 'color 0.2s, fill 0.2s, border-color 0.2s',
});
globalStyle(`${tabStyle}>div.head>button:not(.disable):focus`, {
	// backgroundColor: vars.color.activeFocus,
	color: vars.color.accent,
});
globalStyle(`${tabStyle}>div.head>button.disable`, {
	color: vars.color.disabledText,
	fill: vars.color.disabledText,
	cursor: 'default',
});
globalStyle(`${tabStyle}>div.head>button.active`, {
	borderBottomColor: vars.color.accent,
	color: vars.color.accent,
	fill: vars.color.accent,
});

globalStyle(`${tabStyle}.outline>div.head>button.active`, {
	backgroundColor: vars.color.panelBackground,
	borderColor: vars.color.border,
	// borderBottom: `1px solid ${vars.color.panelBackground}`,
	border: `1px solid ${vars.color.border}`,
	borderBottom: 'transparent',
	// boxShadow: `0px 0px 4px ${vars.color.shadow}`,
	zIndex: 1,
});
globalStyle(`${tabStyle}.outline.simple>div.head>button.active`, {
	borderBottom: `1px solid ${tabPanelColorVar}`,
	backgroundColor: tabPanelColorVar,
});

globalStyle(`${tabStyle}>div.head>button.menu`, {
	position: 'sticky',
	right: 0,
	width: '3em',
	padding: '0.5em',
	backgroundColor: vars.color.windowBackground,
	boxShadow: `0 0 10px ${vars.color.shadow}`,
	zIndex: 2,
	borderRadius: 0,
});

globalStyle(`${tabStyle}.outline>div.head>button.menu`, {
	borderLeft: `1px solid ${vars.color.border}`,
	borderBottom: `1px solid ${vars.color.border}`,
	marginLeft: '0.5em',
});

globalStyle(`${tabStyle}>div.head>button.menu:hover,${tabStyle}>div.head>button.menu:focus`, {
	backgroundColor: vars.color.windowBackground,
});

globalStyle(`${tabStyle}>div.body`, {
	display: 'flex',
	flexDirection: 'column',
	padding: '0.8em',
	height: 0,
	flex: 1,
	overflow: 'auto',
});

globalStyle(`${tabStyle}.outline>div.body`, {
	border: `1px solid ${vars.color.border}`,
	borderRadius: vars.layout.smallRadius,
	backgroundColor: vars.color.panelBackground,
});

globalStyle(`${tabStyle}.outline.simple>div.body`, {
	border: 'none',
	borderTop: `1px solid ${vars.color.border}`,
	borderRadius: 0,
	backgroundColor: tabPanelColorVar,
});

globalStyle(`${tabStyle}>div.body>*:not(.active)`, {
	display: 'none !important',
});
